﻿<template>

<!--  顶部导航栏-->
  <TopMenu/>

<!--  主体区域-->
  <div>
<!--    背景-->
    <div style="width: 100%;height: 90vh;overflow: hidden;opacity:0.8;background-color: lightgray;">
      <!-- 隐藏的文件输入元素，用于存储上传的图片 -->
      <input type="file" id="fileInput" style="display: none;" accept=".jpg, .jpeg, .png" @change="handleFileChange" />

      <!--左上原图区域-->
      <span
          style="position: absolute;margin: 4% 0 0 15%;font-weight: bolder;font-size: 30px;"
      >Original Picture</span>
      <div
          @click="triggerFileInput"
          style="position: absolute; width: 30%; height: 35%; border: 1px solid black; margin: 7% 0 0 6%;">
        <!-- 图片显示区域 -->
        <el-image
            :src="url_original"
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;padding: 20px 60px">
          <!-- 图片加载占位符 -->
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
          <!-- 图片加载失败显示 -->
          <template #error>
            <div class="image-slot" style="margin: 27% 33%;"><i class="el-icon-picture-outline" style="font-size: xx-large">upload</i></div>
          </template>
        </el-image>
      </div>

      <el-row>
        <el-button style="position: absolute;margin: 27% 0 0 16.5%;width: 150px; height:50px;border-radius: 30px;font-size: x-large"
                   plain class="button" size="large" type="success" @click="detect">
          Detect <i class="el-icon-search"></i>
        </el-button>
      </el-row>

<!--      左下输出数值区-->
      <div style="position: absolute; width: 30%; height: 20%; border: 1px solid black; margin: 32% 0 0 6%;">
        <!-- 第一行：标题 -->
        <div style="display: flex; justify-content: center; align-items: center; height: 30%;">
          <span style="font-weight: bolder;font-size: 30px;">Result of the Detection</span>
        </div>

        <!-- 第二行：Classification 和 Score -->
        <div style="display: flex; justify-content: center; align-items: center; height: 70%;">
          <el-row :gutter="150">
            <el-col :span="12">
              <div class="text" style="white-space: nowrap; font-size: 20px;">
                <span class="mx-1">Classification：</span>
                <span style="text-decoration: underline;white-space:pre;color:green;font-weight: bold">{{ classification }}</span>
              </div>
            </el-col>
<!--            加红色边框：padding:3px;border: 5px solid red-->
            <el-col :span="12">
              <div class="text" style="white-space: nowrap; font-size: 20px;">
                <span class="mx-1">Score：</span>
                <span style="text-decoration: underline;white-space:pre;color:green;font-weight: bold">{{ score }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>


      <!--      右上按钮区-->
      <div style="position: absolute; margin: 5% 0 0 53.5%; width: 50%; height: 20%; border: 0px solid black;">
        <el-row :gutter="50">
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-circle-plus" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-remove" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-full-screen" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-s-management" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-download" style="font-size: 50px;"></i>
            </div>
          </el-col>
        </el-row>
      </div>


      <!--      右下图片区-->
      <div style="position: absolute; margin: 10.5% 0 0 43%; width: 50%; height: 61.5%; border: 3px solid black;">
        <el-row :gutter="100" style="margin: 7.5% 0 0 10%;width:90%;font-weight: bold;font-size: 25px;">
<!--           style="border: 3px solid darkred;"-->
          <el-col :span="7">
            <span>Original</span>
          </el-col>
          <el-col :span="7">
            <span>Detection</span>
          </el-col>
          <el-col :span="7">
            <span>Segment</span>
          </el-col>
        </el-row>


<!--        border: 3px solid darkred;-->
        <div class="image"
             style="position:absolute;margin:0 0 0 0.5%;width:99%; height: 70%;background-color: lightgray">
          <el-image :src="url_result" style="width: 100%; height: 100%;">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
            <template #error>
              <div class="image-slot" style="margin: 20% 42%;"><i class="el-icon-picture-outline" style="font-size: xx-large">result</i></div>
            </template>
          </el-image>
        </div>


      </div>


   </div>
  </div>


</template>

<script>
import TopMenu from "@/components/TopMenu.vue";
import {ElMessage} from "element-plus";

export default {
  name: "ImageGUI",
  components: {TopMenu},

  data() {
    return {
      url_original: '',
      url_result:'', //即src/assets目录下
      selectedFile: null, // 用于存储选择的文件对象
      classification: '    ',
      score:'    ',
      count:0,
    };
  },

  // 在进入界面时调用 clearImage 方法
  created() {
    this.clearImage();
  },

  // 在组件销毁时调用 clearImage 方法
  unmounted() {
    this.clearImage();
  },

  methods: {
    triggerFileInput() {
      const fileInput = document.getElementById('fileInput');
      fileInput.click();
    },

    handleFileChange(event) {
      const files = event.target.files;
      if (files.length > 0) {
        const file = files[0];

        // 检查文件是否为图片
        if (file.type.match('image.*')) {
          // 创建图片的临时 URL
          this.url_original = URL.createObjectURL(file);
          // 存储文件对象，以便上传时使用
          this.selectedFile = file;
        } else {
          alert('请选择图片文件！');
        }
      }
    },
    clearImage() {
      // 清除图片 URL 和撤销临时对象 URL
      this.url_original = '';
      this.url_result = '';
      this.classification = '    ';
      this.score = '    ';
      this.count = 0;
      if (this.selectedFile) {
        URL.revokeObjectURL(this.selectedFile);
      }
      else{
        this.selectedFile = null;
      }

    },


    detect() {
      console.log(this.count)

      if(this.url_original === ''){
        ElMessage.error("Haven't upload.");
      }

      else if(this.count === 0){//用于演示，第一次点击时

        this.url_result=require('@/assets/imgs/0_007_result.png');
        this.classification = ' 0 ';
        this.score = '5.3';

        this.count+=1;

        ElMessage.success('Done.');
      }

      else{

        this.url_result=require('@/assets/imgs/1_007_result.png');
        this.classification = ' 1 ';
        this.score = '98.9';
        ElMessage.success('Done.');
      }


    }
  }
};
</script>

<style>

//图片列表系列style
.image-gallery {
  margin: 20px;
}
.image-item {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.image-preview {
  width: 100px;
  height: auto;
  margin-right: 10px;
}
.selected-image img {
  max-width: 100%;
  height: auto;
}

</style>
